<template>

    <a-form ref="formRef" class="smart-query-form">
        <a-row class="smart-query-form-row">
            <a-col span="20" class="smart-query-form-col">
                <a-row class="smart-query-form-row" style="margin-top: 10px;">
                    <a-form-item label="年份" class="smart-query-form-item">
                        <a-date-picker :valueFormat="'YYYY'" :allowClear="false" style="width: 200px"
                            :defaultValue="null" v-model:value="queryForm.key1" picker="year"
                            placeholder="请选择年份查看相关信息" />
                    </a-form-item>
                    <a-form-item class="smart-query-form-item">
                        <a-button type="primary" @click="queryData('1')">
                            <template #icon>
                                <SearchOutlined />
                            </template>
                            查询
                        </a-button>
                        <a-button @click="resetQuery" class="smart-margin-left10">
                            <template #icon>
                                <ReloadOutlined />
                            </template>
                            重置
                        </a-button>
                    </a-form-item>
                </a-row>
            </a-col>
            <a-col span="4">
                <a-form-item style="margin-top: 10px;width: 100%;">
                    <a-tooltip title="返回上级">
                        <a-button style="float: right;margin-right: 20px;" size="middle" @click="goback">
                            <template #icon>
                                <RollbackOutlined />
                            </template>
                        </a-button>
                    </a-tooltip>
                </a-form-item>
            </a-col>
        </a-row>

    </a-form>
    <a-card size="small" :bordered="false" :hoverable="true">
        <!---------- 表格 begin ----------->
        <a-table size="small" :dataSource="tableData" :columns="columns" rowKey="blfunduseid" bordered
            :loading="tableLoading" :pagination="false">
        </a-table>
        <!---------- 表格 end ----------->
        <!-- 分页-->
        <div class="smart-query-table-page">
            <a-pagination showSizeChanger showQuickJumper show-less-items :pageSizeOptions="PAGE_SIZE_OPTIONS"
                :defaultPageSize="queryForm.limit" v-model:current="queryForm.page" v-model:pageSize="queryForm.limit"
                :total="total" @change="queryData" @showSizeChange="queryData" :show-total="(total) => `共${total}条`" />
        </div>
        <div v-show="tableData.length!=0" class="pagination" style="margin: 10px 0px 10px 20px;">
            <div class="endWord">协议共计<span style="color: red;margin: 0px 5px;">{{total}}</span>份</div>
            <div class="endWord">协议金额共计 <span style="color: red;margin: 0px 5px;">{{totalMoney}}</span>(单位：元)</div>
        </div>
    </a-card>

</template>

<script setup>
    import { nextTick, reactive, ref, defineProps, onMounted, h } from 'vue';
    import { getStatisticsApi } from '/@/api/infoStatistics/infoStatistics-api';
    import AreaCascader from '/@/components/framework/area-cascader/index.vue';
    import { SmartLoading } from '/@/components/framework/smart-loading';
    import Upload from '/@/components/support/file-upload/index.vue';
    import { regular } from '/@/constants/regular-const';
    import { message, Modal } from 'ant-design-vue';
    import { PAGE_SIZE, PAGE_SIZE_OPTIONS } from '/@/constants/common-const';
    import { smartSentry } from '/@/lib/smart-sentry';
    import _ from 'lodash';
    import { TABLE_ID_CONST } from '/@/constants/support/table-id-const';
    defineExpose({
        showModal,
    });
    const props = defineProps({
        passParams: {
            type: Object,
        },
    })
    // --------------------- modal 显示与隐藏 ---------------------
    // 是否展示
    const visible = ref(false);

    function showModal(data) {
        Object.assign(form, formDefault);
        if (data.blfunduseid && !_.isEmpty(data)) {
            Object.assign(form, data);
        }
        visible.value = true;
    }

    const emits = defineEmits(['emitPass'])
    function goback() {
        emits('emitPass', true)
    }

    // ---------------------------- 表格列 ----------------------------
    const columns = ref([
        {
            title: '项目名称',
            dataIndex: 'blapplyprojectname',
            align: 'center',
        },
        {
            title: '对应协议',
            dataIndex: 'blapplyname',
            align: 'center',
        },
        {
            title: '项目负责人',
            dataIndex: 'blprojectmanagepeople',
            align: 'center',
        },
        {
            title: '协议金额',
            dataIndex: 'blprojectmoney',
            align: 'center',
            sorter: {
                compare: (a, b) => a.blprojectmoney - b.blprojectmoney,
            },
        },
        {
            title: '协议签订时间',
            align: 'center',
            dataIndex: 'blapplyprojectapplydate',
        },
    ]);

    const queryFormState = {
        key: props.passParams.blthreetype, // 使用单位
        key1: undefined, // 年份
        page: 1,
        limit: PAGE_SIZE,
    };
    // 查询表单form
    const queryForm = reactive({ ...queryFormState });
    // 表格加载loading
    const tableLoading = ref(false);
    // 表格数据
    const tableData = ref([]);
    // 总数
    const total = ref(0);
    // 总金额
    const totalMoney = ref(0);

    // 重置查询条件
    function resetQuery() {
        Object.assign(queryForm, queryFormState);
        queryForm.key1 = undefined;
        tableData.value = [];
        total.value = 0
        searchPage.value = false
    }
    const searchPage = ref(false)//检索的翻页
    // 查询数据
    async function queryData(a) {
        tableLoading.value = true;
        try {
            if (queryForm.key1 == undefined) {
                message.error('请选择年份');
            } else {
                if (a === '1') {
                    queryForm.page = 1;
                    searchPage.value = true
                }
                if (!searchPage.value) {
                    queryForm.key1 = undefined;
                }
                let queryResult = await getStatisticsApi.getProList(queryForm);
                tableData.value = queryResult.list.records;
                total.value = queryResult.list.total;
                totalMoney.value = queryResult.allMoney;
            }
        } catch (e) {
            smartSentry.captureError(e);
        } finally {
            tableLoading.value = false;
        }
    }

</script>

<style lang="less" scoped>
    .form-width {
        width: 100% !important;
    }

    .footer {
        width: 100%;
        display: flex;
        justify-content: flex-end;
    }

    :deep(.ant-card-body) {
        padding: 10px;
    }

    .endWord {
        margin: 0 0 10px 0;
        font-size: 18px;
    }
</style>